<template>
	<section>
		<!--工具条-->
		<el-col :span="24" class="toolbar" style="padding-bottom: 0px;">
			<el-form :inline="true" :model="query">
				<el-form-item>
					<el-input v-model="query.keyWords" placeholder="编号"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" v-on:click="getUsers">查询</el-button>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" @click="handleAdd">添加</el-button>
				</el-form-item>
			</el-form>
		</el-col>

		<!--列表-->
		<el-table :data="listData" highlight-current-row v-loading="listLoading" @selection-change="selsChange" style="width: 100%;">
			<el-table-column type="selection" width="55">
			</el-table-column>
			<el-table-column type="index" width="60">
			</el-table-column>
			<el-table-column prop="sn" label="编号" sortable>
			</el-table-column>
			<el-table-column prop="name" label="数据字典名" sortable>
				<template slot-scope="scope">
					<span @dblclick="detailShow(scope.$index, scope.row)" v-text="scope.row.name"></span>
				</template>
			</el-table-column>
			<el-table-column label="操作" width="150">
				<template scope="scope">
					<el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
					<el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>


		<!-- 数据字典明细 -->
		<el-drawer
				title="数据字典明细!"
				:visible.sync="drawer"
				direction="rtl"
				size="50%">
			<el-table :data="detailData">
				<el-table-column property="name" label="明细名"></el-table-column>
				<el-table-column>
					<template slot="header" slot-scope="scope">
						<el-button type="success" round size="mini" @click="detaiSave(scope.$index, scope.row)">添加</el-button>
					</template>
					<template scope="scope">
						<el-button size="small" @click="detailUpdate(scope.$index, scope.row)">编辑</el-button>
						<el-button type="danger" size="small" @click="detailDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<!-- 抽屉明细的分页 -->
			<el-col :span="24" class="toolbar">
				<el-pagination layout="prev, pager, next" @current-change="detailHandleCurrentChange" :page-size="5" :total="detailTotal" style="float:right;">
				</el-pagination>
			</el-col>
		</el-drawer>

		<!-- 批量删除和分页 -->
		<el-col :span="24" class="toolbar">
			<el-button type="danger" @click="batchRemove" :disabled="this.sels.length===0">批量删除</el-button>
			<el-pagination layout="prev, pager, next" @current-change="handleCurrentChange" :page-size="pageSize" :total="total" style="float:right;">
			</el-pagination>
		</el-col>

		<!--新增和修改界面-->
		<el-dialog title="新增" :visible.sync="addFormVisible" :close-on-click-modal="false">
			<el-form :model="addForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="姓名" prop="name">
					<el-input v-model="addForm.name" auto-complete="off"></el-input>
				</el-form-item>
				<el-form-item label="编号" prop="sn">
					<el-input v-model="addForm.sn" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="addFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="addSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>


		<!--明细的新增和修改界面-->
		<el-dialog title="新增" :visible.sync="detailAddFormVisible" :close-on-click-modal="false">
			<el-form :model="detailAddForm" label-width="80px" :rules="addFormRules" ref="addForm">
				<el-form-item label="明细名" prop="name">
					<el-input v-model="detailAddForm.name" auto-complete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click.native="detailAddFormVisible = false">取消</el-button>
				<el-button type="primary" @click.native="detailAddSubmit" :loading="addLoading">提交</el-button>
			</div>
		</el-dialog>
	</section>
</template>

<script>
	export default {
		data() {
			return {
                listLoading:false,
				sels:[],
                listData:[],
				total:0,
                /* 分页和高级查询数据 */
                query:{
                    currentPage:1,
                    pageSize:5,
                    keyWords:"",
                },
				pageSize:5,
				/* 添加和修改弹框是否显示 */
                addFormVisible:false,
				addForm:{
                    sn:"",
					name:"",
				},
                /* 校验，required为true，不能为空，必须填写，message：错误提示 */
                addFormRules: {
                    name: [
                        { required: true, message: '请输入姓名', trigger: 'blur' }
                    ]
                },
				/* 点击确认时按钮加载状态 */
                addLoading:false,
				/* 数据字典明细是否显示 */
                drawer:false,

				/* 明细列表数据 */
                detailData:[],

				/* 明细添加是否显示 */
                detailAddFormVisible:false,
				/* 添加框绑定数据 */
                detailAddForm:{
                    name:"",
					types_id:0,
				},
                detailQuery:{
                    currentPage:1,
                    pageSize:5,
					id:'',
                },
				detailTotal:0,

			}
		},
		methods: {
			/* 查询列表数据 */
		    loadListData(){
				this.$http.post("http://localhost:8080/Dictionaries",this.query).then(res => {
				    this.listData = res.data.data;
					this.total = res.data.total;
				})
			},

		    /* 批量选择 */
            selsChange(val) {
				this.sels = val;
			},
			/* 修改 */
            handleEdit(i,row){
                // 回显数据
                this.addForm = Object.assign({}, row);
                this.addFormVisible = true;
			},
			/* 单个删除 */
            handleDel(i,row){
                this.$confirm('是否删除？', '提示', {
                    confirmButtonText: '要它何用？',
                    cancelButtonText: '算了，不删了',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("http://localhost:8080/Dictionaries/" + row.id).then(res => {
                        if(res.data.success){
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message.error(res.data.msg);
                        }
                        this.loadListData();
					})
                }).catch(() => {
                    this.$message('删除取消');
                })
			},
			/* 添加 */
            handleAdd(){
                this.addForm = {
                    sn:"",
                    name:"",
				};
				this.addFormVisible = true;
			},
            /* 批量删除 */
            batchRemove() {
				let ids = this.sels.map(i => i.id);
                this.$confirm('是否删除？', '提示', {
                    confirmButtonText: '要它何用？',
                    cancelButtonText: '算了，不删了',
                    type: 'warning'
                }).then(() => {
                    this.$http.patch("http://localhost:8080/Dictionaries", ids).then(res => {
                        if(res.data.success){
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message.error(res.data.msg);
                        }
                        this.loadListData();
                    })
                }).catch(() => {
                    this.$message('删除取消');
                })
			},
			/* 当前页改变 */
            handleCurrentChange(val){
                this.query.currentPage = val;
                this.loadListData();
			},
			/* 高级查询 */
            getUsers(){
                this.query.currentPage = 1;
                this.loadListData();
			},
			/* 点击添加和修改确认 */
            addSubmit(){
				this.$http.put("http://localhost:8080/Dictionaries", this.addForm).then(res => {
				    if(res.data.success){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
					} else {
                        this.$message.error(res.data.msg);
					}
                    this.addFormVisible = false;
				    this.loadListData();
				})
			},



			/** 明细列表========================================================================= */
			/* 显示抽屉 */
            detailShow(i,row){
                this.detailQuery.id = row.id;
                this.detailQuery.currentPage = 1;
                this.getDetailList();
                this.drawer = true;
			},
			/* 获取列表数据 */
			getDetailList() {
                this.$http.post("http://localhost:8080/Dictionaries/detail", this.detailQuery).then(res => {
                    this.detailData = res.data.data;
                    this.detailTotal = res.data.total;
                })
			},

			/* 明细修改 */
            detailUpdate(i,row){
                console.log(row);
				this.detailAddForm = Object.assign({}, row);
                this.detailAddFormVisible = true;
			},
			/* 明细删除 */
            detailDelete(i,row) {
                this.$confirm('是否删除？', '提示', {
                    confirmButtonText: '要它何用？',
                    cancelButtonText: '算了，不删了',
                    type: 'warning'
                }).then(() => {
                    this.$http.delete("http://localhost:8080/Dictionaries/detail/" + row.id).then(res => {
                        if(res.data.success){
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                        } else {
                            this.$message.error(res.data.msg);
                        }
                        this.getDetailList();
                    })
                }).catch(() => {
                    this.$message('删除取消');
                })
			},
			/* 明细添加 */
            detaiSave(i,row) {

                this.detailAddForm = {
                    name:'',
					types_id:this.detailQuery.id,
				}
				this.detailAddFormVisible = true;
			},
			/* 点击确认 */
            detailAddSubmit() {
                this.$http.put("http://localhost:8080/Dictionaries/detail", this.detailAddForm).then(res => {
                    if(res.data.success){
                        this.$message({
                            message: res.data.msg,
                            type: 'success'
                        });
                    } else {
                        this.$message.error(res.data.msg);
                    }
                    this.detailAddFormVisible = false;
                    this.getDetailList();
                })
			},

			/* 明细分页 */
            detailHandleCurrentChange(val) {
				this.detailQuery.currentPage = val;
				this.getDetailList();
			}
		},
		mounted() {
		    this.loadListData();
		},
		watch: {
            total() {  // 监听数据总条数，当页面总条数改变就触发改函数
                /* 当数据总条数等于当前页减一乘以当前页的时候，说明已经将当前页的删除完了，将当前页减一，并重新刷新页面 */
                if(this.total==(this.query.currentPage-1)*this.query.pageSize&& this.total!=0){
                    this.query.currentPage --;
                    this.loadListData()
                }
            },
            detailTotal() {
                if(this.detailTotal==(this.detailQuery.currentPage-1)*this.detailQuery.pageSize&& this.detailTotal!=0){
                    this.detailQuery.currentPage --;
                    this.getDetailList()
                }
			}
		}
	}

</script>